<script lang="ts" setup>
import {ref} from "vue"
import {ElMessage} from "element-plus"
import {userReset} from "../serve"
import router from "../router"
import store from "../pina"

const
    loading = ref(false),
    fromRules = {
      oldPwd: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ],
      newPwd: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ],
      confirmPwd: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ]
    },
    froms = ref(),
    fromData = ref({
      "oldPwd": "",
      "newPwd": "",
      "confirmPwd": ""
    }),
    userName = ref(sessionStorage.getItem('userName')),
    pina = store()
;

async function change() {
  try {
    await froms.value.validate()
    if (fromData.value.newPwd != fromData.value.confirmPwd) {
      ElMessage({message: '新密码不一致', type: 'error'})
      return
    }
    loading.value = true
    userReset({...fromData.value}).then(() => {
      ElMessage({message: '修改成功！', type: 'success'})
      setTimeout(() => {
        setTimeout(() => {
          fromData.value = {
            "oldPwd": "",
            "newPwd": "",
            "confirmPwd": ""
          }
          sessionStorage.clear()
          pina.app.tagList = []
          router.push('/').catch(() => true)
        }, 1500)
      }, 600)
    }).catch(() => {
      loading.value = false
    })
  } catch (e) {
  }
}
</script>

<template>
  <el-card v-loading="loading" box element-loading-text="加载中...">
    <template #header>个人中心</template>
    <el-form ref="froms" :model="fromData" :rules="fromRules" el-From>
      <el-form-item>
        <div style="display: flex;">
          <div div>账号：</div>
          <el-input v-model="userName" disabled/>
        </div>
      </el-form-item>
      <el-form-item prop="oldPwd">
        <div style="display: flex;">
          <div div>原密码：</div>
          <el-input v-model="fromData['oldPwd']" placeholder="请输入原密码" show-password type="password"/>
        </div>
      </el-form-item>
      <el-form-item prop="newPwd">
        <div style="display: flex;">
          <div div>新密码：</div>
          <el-input v-model="fromData['newPwd']" placeholder="请输入新密码" show-password type="password"/>
        </div>
      </el-form-item>
      <el-form-item prop="confirmPwd">
        <div style="display: flex;">
          <div div>确认密码：</div>
          <el-input v-model="fromData['confirmPwd']" placeholder="请再次输入新密码" show-password type="password"/>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button round style="width: 100%;" type="success" @click="change">确定修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style lang="scss" scoped>
[box] {
  width: 50%;
  height: 70%;
  margin: auto;
}

[el-From] {
  width: 80%;
  margin: auto;

  [div] {
    width: 120px;
    text-align: right;
  }
}
</style>